<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow bgimage="linear-gradient(to right, #4facfe 0%, #00f2fe 100%)" status-bar
			left-icon="left" left-text="返回" title="导航" @clickLeft="back" />
		<view class="uni-nav-bar-empty-v"></view>
		<view class="content-container" style="margin-top: 10rpx;">
			<graceSegmentedControl :items="cates" :current="current" @change="chooseWay"></graceSegmentedControl>
		</view>
		<map id="map" style="width: 100%; height: 100vh;" :latitude="userLatitude" :longitude="userLongitude"
			:markers="covers" show-location="true" :polyline="polyline" scale="12">
		</map>
	</view>
</template>

<script>
	import graceSegmentedControl from "../../graceUI/components/graceSegmentedControl.vue";
	import merchantApi from "@/api/merchant.js"
	export default {
		components: {
			graceSegmentedControl
		},
		data() {
			return {
				cates: ["步行", "驾车", "公交"],
				catesType: ["walking", "driving", "transit"],
				merchantId: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				merchantLatitude: 39.909,
				merchantLongitude: 116.39742,
				userLatitude: getApp().globalData.location.latitude,
				userLongitude: getApp().globalData.location.longitude,
				covers: [],
				polyline: [{
					points: [],
					color: "#28b463",
					width: 6
				}],
				distance: 0,
			}
		},
		onLoad(options) {
			this.merchantId = options.merchantId
			console.log('options.merchantId', options.merchantId)
			merchantApi.getMerchantInfo(options.merchantId).then(res => {
				console.log(res)
				this.merchantLatitude = res.latitude;
				this.merchantLongitude = res.longitude;
				this.covers = [{
					id: 1,
					latitude: getApp().globalData.location.latitude,
					longitude: getApp().globalData.location.longitude
				}, {
					id: 2,
					latitude: res.latitude,
					longitude: res.longitude
				}]
				console.log("this.covers", this.covers);
				this.initMap('driving');
			})
		},
		onReady() {

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			chooseWay(e){
				this.initMap(this.catesType[e]);
			},
			initMap(type) {
				var that = this
				// 请求腾讯云地图
				const url = 'https://apis.map.qq.com/ws/direction/v1/'+type+'/?from=' + that.userLatitude + ',' + that
					.userLongitude + '&to=' + that.merchantLatitude + ',' + that.merchantLongitude +
					'&key=PWQBZ-BMIC3-FGD37-3AMDM-HEY6Q-RKFKW';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						console.log(res.data);
						if (res.data.result && res.data.result.routes[0]) {
							console.log("get..")
							const coors = res.data.result.routes[0].polyline
							for (var i = 2; i < coors.length; i++) {
								coors[i] = coors[i - 2] + coors[i] / 1000000
							}
							console.log(coors);
							const points = [];
							for (var i = 0; i < coors.length; i = i + 2) {
								points.push({
									latitude: coors[i],
									longitude: coors[i + 1],
								})
							}
							console.log(points);
							that.polyline[0].points = points
							that.distance = res.data.result.routes[0].distance
						}

					},
					fail: (err) => {
						// 请求失败的回调函数
						console.error('请求失败:', err);
					},
					complete: () => {
						// 请求完成的回调函数（无论成功与否）
					}
				});
			}
		}
	}
</script>

<style>

</style>